<template>
<div>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    :style="`width:${width};`"
    @change="handleChange"
  ></el-cascader>
  <el-button type="text" size="small" @click.stop="onRefresh"><i class="el-icon-refresh"></i></el-button>
</div>
</template>
<script>
import {
  getProductKindSelectList //url: '/Product/GetProductKindSelectList'
} from "@/api/product";
export default {
  model:{
    prop: 'id', //prop属性说，我要将id作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值
    event: 'to-v-model'     //event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
  },
  props: {
    type: { type: Number, default: 1 },
    id: { type: Number, default: 0 },
    width:{type:String,default:'93%'}
  },
  data() {
    return {
      value: [],
      options: [
        {
          //   value: 'zhinan',
          //   label: '指南',
          //   children: [{
          //     value: 'shejiyuanze',
          //     label: '设计原则',
          //   }]
        }
      ]
    };
  },
  created() {
    this.GetProductKindList();
  },
  watch: {
    type: function() {
      this.GetProductKindList();
    },
    id: function() {
      this.SetInit();
    }
  },
  methods: {
    onRefresh(){
      this.GetProductKindList();
    },
    GetProductKindList() {
      getProductKindSelectList({ type: this.$props.type }).then(r => {
        if (r.code == 0) {
          this.options = r.data;
          this.SetInit();
        } else {
          this.$message.error("获取商品种类列表出错！原因：" + r.msg);
        }
      });
    },
    SetInit() {
      let id = this.$props.id;
      if (id > 0) {
        let id0 = Number(String(id).substr(0, 4) + "000");
        this.value = [id0, id];
      }
    },
    handleChange(val) {
      this.$emit("to-v-model",val[1]);//返回末级给v-model变量
      this.$emit("change", val); //返回：[一级ID,二级ID]
    }
  }
};
</script>